import React, { useEffect, useState } from 'react';
import { Card, Form, Button } from 'react-bootstrap';

const AnnouncementDisplay = ({ config, setConfig }) => {
  // 组件内部默认配置
  const defaultAnnouncementDisplayConfig = {
    showAnnouncements: false,
    announcementInterval: 60,
    announcements: []
  };

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultAnnouncementDisplayConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultAnnouncementDisplayConfig,
      ...config,
      announcements: config.announcements || []
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    const updatedLocalConfig = {
      ...localConfig,
      [key]: value
    };
    setLocalConfig(updatedLocalConfig);
    
    setConfig({
      ...config,
      [key]: value
    });
  };

  // 添加新公告
  const handleAddAnnouncement = () => {
    const updatedAnnouncements = [...localConfig.announcements, ''];
    handleConfigChange('announcements', updatedAnnouncements);
  };

  // 更新公告内容
  const handleUpdateAnnouncement = (index, value) => {
    const updatedAnnouncements = [...localConfig.announcements];
    updatedAnnouncements[index] = value;
    handleConfigChange('announcements', updatedAnnouncements);
  };

  // 删除公告
  const handleDeleteAnnouncement = (index) => {
    const updatedAnnouncements = localConfig.announcements.filter((_, i) => i !== index);
    handleConfigChange('announcements', updatedAnnouncements);
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#4caf50', boxShadow: '0 0 20px rgba(76, 175, 80, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(76, 175, 80, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>公告显示</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                checked={localConfig.showAnnouncements}
                onChange={() => handleConfigChange('showAnnouncements', !localConfig.showAnnouncements)} 
                label="启用公告显示" 
                className="form-switch-glow"
              />
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>公告显示间隔（秒）</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                value={localConfig.announcementInterval}
                onChange={(e) => handleConfigChange('announcementInterval', parseInt(e.target.value) || 60)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
            </Form.Group>
          </div>
        </div>

        <div className="mb-3">
          <h4 style={{color: '#81c784', marginBottom: '15px'}}>公告内容</h4>
          <div className="mb-2">
            <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
              支持颜色代码格式: {"{"}color:red{"}"}文本{"{"}/color{"}"}
            </Form.Text>
          </div>
          
          {localConfig.announcements.map((announcement, index) => (
            <div key={index} className="mb-3 p-3 bg-black bg-opacity-30 rounded border border-white border-opacity-10">
              <div className="row">
                <div className="col-10">
                  <Form.Control 
                    as="textarea" 
                    rows={3} 
                    value={announcement || ''} 
                    onChange={(e) => handleUpdateAnnouncement(index, e.target.value)} 
                    className="glass-input"
                    style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff', resize: 'vertical'}} 
                    placeholder={`公告 ${index + 1}`}
                  />
                </div>
                <div className="col-2 d-flex align-items-center justify-content-center">
                  <Button 
                    variant="danger" 
                    onClick={() => handleDeleteAnnouncement(index)} 
                    className="w-100"
                    style={{backgroundColor: '#d32f2f', borderColor: '#d32f2f', boxShadow: '0 0 10px rgba(211, 47, 47, 0.5)'}}
                  >
                    删除
                  </Button>
                </div>
              </div>
            </div>
          ))}
          
          <Button 
            variant="success" 
            onClick={handleAddAnnouncement} 
            className="w-100 mt-2"
            style={{backgroundColor: '#4caf50', borderColor: '#4caf50', boxShadow: '0 0 10px rgba(76, 175, 80, 0.5)'}}
          >
            添加公告
          </Button>
        </div>
      </Card.Body>
    </Card>
  );
};

export default AnnouncementDisplay;